<style lang="less" scoped>
@import "./demand.less";
</style>
<template>
  <div>
      <Row>
            <Col span="24">
                <Card>
                    <div>
                            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
                    </div>
                    <div class="margin-top-15" style="text-align: center">
                            <Page :total="tableShow.count" :current="tableShow.page" :page-size="tableShow.size" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="img.show" :style="{top:'30px'}" :width="560">
          <div class="img-list" v-for="item in img.list">
            <img :src="item">
          </div>
        </Modal>
  </div>
  
</template>
<script>
const resourse = "demand";
import axios from "axios";
export default {
  data() {
    return {
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 80
        },
        {
          title: "标题",
          key: "title",
          align: "center"
        },
        {
          title: "省市区",
          key: "address",
          align: "center"
        },
        {
          title: "街道",
          key: "street",
          align: "center"
        },
        {
          title: "类型",
          key: "post_type",
          align: "center",
          render: (h, params) => {
            return h("div", params.row.post_type.title);
          }
        },
        {
          title: "户型",
          key: "type",
          align: "center"
        },
        {
          title: "面积",
          align: "center",
          render: (h, params) => {
            return h("div", params.row.min_area + "-" + params.row.area);
          }
        },
        {
          title: "租赁方式",
          key: "rent_type",
          align: "center",
          render: (h, params) => {
            return h("div", params.row.rent_type.name);
          }
        },
        {
          title: "付费方式",
          key: "price_type",
          align: "center"
        },
        {
          title: "价格",
          align: "center",
          render: (h, params) => {
            return h("div", params.row.min_price + "-" + params.row.price);
          }
        },
        {
          title: "联系人",
          key: "contact",
          align: "center"
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center"
        },
        {
          title: "时间",
          key: "create_time",
          align: "center"
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary"
                },
                on: {
                  click: () => {
                    this.showImgs(params.row);
                  }
                }
              },
              "期望图"
            );
          }
        }
      ],
      tableData: [],
      tableShow: {
        count: 0,
        page: 1,
        size: 10
      },
      created: 0.0,
      img:{
        show:false,
        list:[]
      }
    };
  },
  created() {
    axios.get("recharge/create").then(response => {
      let res = response.data;
      if (res.code === 200) {
        this.created = res.data.total;
      } else {
        if (res.code === 403) {
          this.$store.commit("logout", this);
          this.$router.push({
            name: "login"
          });
        } else {
          this.$Message.error(res.msg);
        }
      }
    });
    // this.init();
    this.getList();
  },
  methods: {
    changePage(page) {
      this.tableShow.page = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.size = size;
      this.getList();
    },
    getList() {
      axios.get(resourse,{params:{page:this.tableShow.page,size:this.tableShow.size}}).then(response => {
        let res = response.data;
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.tableShow.count = res.data.count
        } else {
          if (res.code === 403) {
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          } else {
            this.$Message.error(res.msg);
          }
        }
      });
    },
    showImgs(row) {
      // console.log(row.imgs);
      this.img.show = true
      this.img.list = row.imgs
    }
  }
};
</script>

